<template>
	<div class="imageContent">
		<div v-for="(item, index) in images" class="imageItem">
			<div v-if="item.local || item.remote" style="position: relative;display: flex;width: 100px;height: 100px;justify-content:center;align-items:center;background-color: rgba(0, 0, 0, 0.02);border-radius: 8px;border: 1px dashed #d9d9d9;overflow: hidden">
				<img :src="item.local || item.remote" style="max-width: 100%;max-height: 100%;" />
				<div style="position: absolute;right: 5px; top: 10px;z-index:10;font-size: 18px;">
					<EyeOutlined style="color:#333333;cursor: pointer;margin-right:10px" @click.stop="(visible = true) && (current = index)" />
					<DeleteOutlined v-if="!disabled" @click="handleDelete" style="color:#333333;cursor: pointer" />
				</div>
			</div>
			<minFile :accept="accept" v-else :index="index" :maxSize="maxSize" @handleReadFile="handleReadFile" style="position: relative;display: flex;width: 100px;height: 100px;justify-content:center;align-items:center;background-color: rgba(0, 0, 0, 0.02);border-radius: 8px;border: 1px dashed #d9d9d9;">
				<div style="width: 100px;height: 100px;display: flex;align-items:center;justify-content:center">
					<LoadingOutlined v-if="imagesLoading[index]" />
					<PlusOutlined v-else />
				</div>
			</minFile>
		</div>
	</div>
	
	<a-image-preview-group v-if="previewMode == 'image'" :preview="{ visible, onVisibleChange: () => visible = false, current }">
		<a-image
			v-for="(item) in images"
			:width="200"
			:style="{ display: 'none' }"
			:src="item.local || item.remote"
		/>
  </a-image-preview-group>
	<a-modal v-if="previewMode == 'modal'" :open="visible" title="预览" :footer="null" @cancel="() => visible = false">
		<img 	v-for="(item) in images" style="width: 100%" :src="item.local || item.remote" />
	</a-modal>
</template>

<script setup>
import minFile from '@/components/common/minFile.vue'
import { ref, defineProps, reactive, defineEmits, watch } from 'vue'
import { PlusOutlined, LoadingOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const props = defineProps({
  modelValue: { type: [Array, String], default: '' },
  previewImage: { type: [Array, String], default: '' },
	customUploadImage: { type: null, default: null },
	disabled: { type: Boolean, default: false },
	uploadLoading: { type: Boolean, default: false },
	maxSize: { type: Number, default: 999 },
	maxCount: { type: Number, default: 1 },
	previewMode: { type: String, default: 'image' },
	accept: { type: String, default: 'image/*' },
	
})

const visible = ref(false)
const current = ref(0)
const v = { local: '', remote: '' }
const images = ref([ v ])
const imagesLoading = ref([])


const init = () => {
	images.value = [v]

	if (!props.modelValue) return
	images.value = []
	if (Array.isArray(props.modelValue)) {
		for (let [i, v] of props.modelValue.entries()) {
			images.value.push({ local: props.previewImage[i] || '', remote: v })
		}
	} else {
		for (let i of props.modelValue.split(',')) {
			images.value.push({ local: props.previewImage || '', remote: i })
		}
	}
	imagesLoading.value.length = images.value.length
}
init()
watch([() => props.modelValue], ([value]) => {
	init()
})
const emit = defineEmits(['handleReadFile', 'handleDelete', 'update:modelValue', 'update:previewImage'])
const handleReadFile = async e => {
	console.log(e, '?')
	if (e.message) return message.error(e.message)
	emit('handleReadFile')
	if (!props.customUploadImage) return
	if (props.maxCount > images.value.length) images.value.push(v)
	imagesLoading.value[e.index] = true
	let res = await props.customUploadImage({ file: e.file })
	imagesLoading.value[e.index] = false
	if (!res) return
	images.value[e.index] = { local: URL.createObjectURL(e.file), remote: res }
	let val = images.value.map(val => val.remote)
	let preVal = images.value.map(val => val.local)
	console.log(val, preVal)
	emit('update:modelValue', Array.isArray(props.modelValue) ? val : val.join() )
	emit('update:previewImage', Array.isArray(props.modelValue) ? preVal : preVal.join() )
}
const handleDelete = e => {
	emit('handleDelete')
	if (!props.customUploadImage) return
	images.value.splice(e.index, 1)
	if (props.maxCount > images.value.length) images.value.push(v)
	let val = images.value.map(val => val.remote)
	emit('update:modelValue', Array.isArray(props.modelValue) ? val : val.join() )
}

</script>

<style lang="scss" scoped>
.imageContent {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.imageItem {
	margin-right: 10px;
	&:last-child {
		margin-right: 0;
	}
}
</style>